<template>
    <div class="app-container">
        <el-form :model="main.queryParams" size="small" :inline="true" v-show="main.showSearch" @submit.native.prevent>
            <el-form-item label="酒店ID" prop="hotelId">
                <el-input v-model="main.queryParams.hotelId" placeholder="请输入酒店Id"
                    @keyup.native.enter="handleHotelQuery" />
            </el-form-item>
            <el-form-item label="酒店名称" prop="hotelName">
                <el-input v-model="main.queryParams.hotelName" placeholder="请输入酒店名称"
                    @keyup.native.enter="handleHotelQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleHotelQuery">搜索</el-button>
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="openAddHotel">新增酒店</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="main.loading" :data="main.list" border>
            <el-table-column label="本地编号" prop="hotelId" width="80px" />
            <el-table-column label="酒店名称" prop="hotelName" />
            <el-table-column label="酒店电话" prop="hotelPhone" />
            <el-table-column label="联系人 / 联系人电话">
                <template slot-scope="scope">
                    {{ scope.row.lxrName }}/{{ scope.row.lxdh }}
                </template>
            </el-table-column>
            <el-table-column label="运营人员" prop="yyryName" />
            <el-table-column label="业务人员" prop="ywryName" />
            <el-table-column label="所属公司" prop="ssgsName" />
            <el-table-column label="宝商酒店ID" prop="bsHotelId" />
            <!-- 
            <el-table-column label="星级">
                <template slot-scope="scope">
                    <el-rate v-model="scope.row.category" disabled show-score text-color="#ff9900"
                        score-template="{value}星"></el-rate>
                </template>
            </el-table-column>
            -->
            <el-table-column label="结算方式" prop="jsfsName" />
            <el-table-column label="30分钟免费取消">
                <template slot-scope="scope">
                    <el-switch :value="dynamicIsFreeCancelable(scope.row.isFreeCancelable)" active-color="#13ce66"
                        inactive-color="#ff4949" @change="postIsFreeCancelable($event, scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="创建时间">
                <template slot-scope="scope">
                    {{ formattedDate(scope.row.createTime) }}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="jumpToHouse(scope.row)">物理房型</el-button>
                    <el-button size="mini" type="text" @click="jumpOnline(scope.row)">上线管理</el-button> <br>
                    <el-button size="mini" type="text" @click="jumpToRoomStatus(scope.row)">房态管理</el-button>
                    <el-button size="mini" type="text" @click="openUpdateRoomRatePlanPolicy(scope.row)">取消规则</el-button>
                    <br>
                    <el-button size="mini" type="text" @click="openIssueConfig(scope.row.hotelId)">发单配置</el-button>
                    <el-button size="mini" type="text" @click="openeditHotel(scope.row.hotelId)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="main.total > 0" :total="main.total" :page.sync="main.queryParams.pageNum"
            :limit.sync="main.queryParams.pageSize" @pagination="getHotelList" />


        <el-dialog :title="addHotel.title" :visible.sync="addHotel.isShow" width="1200px" append-to-body>
            <el-form ref="addHotelForm" :rules="addHotel.rules" :model="addHotel.form" label-width="100px">
                <el-row>
                    <el-col :span="7">
                        <el-form-item prop="eHotelName" label="酒店名称">
                            <el-input v-model="addHotel.form.eHotelName" :disabled="true" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" style="margin-left: 10px;">
                        <el-button type="primary" @click="openSelectElongHotel">标准库选择</el-button>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item prop="hotelPhone" label="酒店电话">
                            <el-input v-model="addHotel.form.hotelPhone" :disabled="true" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item prop="category" label="星级评分">
                            <div class="rate-container">
                                <el-rate v-if="addHotel.form.category" v-model="addHotel.form.category" disabled
                                    show-score text-color="#ff9900" :max="5" score-template="{value}星"></el-rate>
                                <el-rate v-if="!addHotel.form.category" v-model="addHotel.form.category" disabled
                                    show-score text-color="#ff9900" :max="5" score-template="-星"></el-rate>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item prop="hotelCityId" label="酒店地址">
                            <el-cascader style="width: 95%;" filterable v-model="addHotel.form.hotelCityId"
                                :options="selectElongHotel.cityData" @focus="clearCityId"
                                :disabled="true"></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-input v-model="addHotel.form.hotelAddress" :disabled="true" placeholder="请输入详细地址" />
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item prop="googleLon" label="酒店经度">
                            <el-input v-model="addHotel.form.googleLon" :disabled="true" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="googleLat" label="酒店纬度">
                            <el-input v-model="addHotel.form.googleLat" :disabled="true" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="lxrName" label="联系人">
                            <el-input v-model="addHotel.form.lxrName" placeholder="请输入联系人" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="lxdh" label="联系电话">
                            <el-input v-model="addHotel.form.lxdh" placeholder="请输入联系电话" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item prop="jsfs" label="结算方式">
                            <el-select v-model="addHotel.form.jsfs" placeholder="请选择结算方式">
                                <el-option v-for="dict in dict.type.el_jsfs" :key="dict.value" :label="dict.label"
                                    :value="dict.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="dkzh" label="打款账号">
                            <el-input v-model="addHotel.form.dkzh" placeholder="请输入打款账号" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="hzzc" label="合作政策">
                            <el-input v-model="addHotel.form.hzzc" placeholder="请输入合作政策" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="yx" label="邮箱">
                            <el-input v-model="addHotel.form.yx" placeholder="请输入邮箱" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item prop="jdcz" label="酒店传真">
                            <el-input v-model="addHotel.form.jdcz" placeholder="请输入酒店传真" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="ywry" label="业务人员">
                            <el-select v-model="addHotel.form.ywry" placeholder="请选择业务人员">
                                <el-option v-for="user in addHotel.ywryList" :key="user.userId" :label="user.nickName"
                                    :value="user.userId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="yyry" label="运营人员">
                            <el-select v-model="addHotel.form.yyry" placeholder="请选择运营人员">
                                <el-option v-for="user in addHotel.yyryList" :key="user.userId" :label="user.nickName"
                                    :value="user.userId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="yj" label="押金">
                            <el-input-number v-model="addHotel.form.yj" :min="0"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item prop="hzksrq" label="合作开始">
                            <el-date-picker value-format="yyyy-MM-dd" style="width: 100%;"
                                v-model="addHotel.form.hzksrq" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="hzgqrq" label="合作过期">
                            <el-date-picker value-format="yyyy-MM-dd" style="width: 100%;"
                                v-model="addHotel.form.hzgqrq" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="bsHotelId" label="宝商酒店ID">
                            <el-input v-model="addHotel.form.bsHotelId" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="kpzt" label="开票主体">
                            <el-input v-model="addHotel.form.kpzt" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item prop="ssgsName" label="所属公司">
                            <el-input :disabled="true" v-model="addHotel.form.ssgsName" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="jdjd" label="结单节点">
                            <el-select v-model="addHotel.form.jdjd" placeholder="请选择结单节点">
                                <el-option v-for="dict in dict.type.el_jdjd" :key="dict.value" :label="dict.label"
                                    :value="dict.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="zffs" label="支付方式">
                            <el-select v-model="addHotel.form.zffs" placeholder="请选择支付方式">
                                <el-option v-for="dict in dict.type.el_zffs" :key="dict.value" :label="dict.label"
                                    :value="dict.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="remarks" label="备注">
                            <el-input type="textarea" v-model="addHotel.form.remarks" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="success" @click="postEditLocalByOnline">同步艺龙酒店信息</el-button>
                <el-button @click="postAddHotel" type="primary">确 定</el-button>
                <el-button @click="closeAddHotel">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="艺龙标准库" :visible.sync="selectElongHotel.isShow" width="1100px" append-to-body>
            <el-form :model="selectElongHotel.queryParams" size="small" :inline="true"
                v-show="selectElongHotel.showSearch">
                <el-form-item label="酒店名称" prop="hotelName">
                    <el-input v-model="selectElongHotel.queryParams.hotelName" placeholder="请输入酒店名称" />
                </el-form-item>
                <el-form-item label="省份/城市" prop="cityId">
                    <el-cascader filterable v-model="selectElongHotel.queryParams.cityId"
                        :options="selectElongHotel.cityData" @focus="clearCityId"></el-cascader>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="getElongHotel">搜索</el-button>
                </el-form-item>
            </el-form>

            <el-table v-loading="selectElongHotel.loading" :data="selectElongHotel.list">
                <el-table-column label="艺龙酒店ID" prop="HotelId" />
                <el-table-column label="酒店中文名称" prop="HotelName" />
                <el-table-column label="酒店状态" prop="HotelStatus">
                    <template slot-scope="scope">
                        {{ dynamicELongStatus(scope.row.HotelStatus) }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="choiceELongHotel(scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </el-dialog>

        <el-dialog title="取消规则" :visible.sync="updateRoomRatePlanPolicy.isShow" width="700px" append-to-body>
            <el-form :model="updateRoomRatePlanPolicy.form" label-width="80px">
                <el-form-item label="酒店名称">
                    <el-input v-model="updateRoomRatePlanPolicy.form.hotelName" :disabled="true" />
                </el-form-item>
                <el-form-item label="允许取消">
                    <el-switch :value="dynamicIsCancel(updateRoomRatePlanPolicy.form.isCancel)" active-color="#13ce66"
                        inactive-color="#ff4949" @change="cancelRuleSwitch($event)">
                    </el-switch>
                </el-form-item>
                <el-form-item v-if="updateRoomRatePlanPolicy.form.isCancel === 1">
                    入住当天
                    <el-input size="mini" style="width: 50px;"
                        v-model="updateRoomRatePlanPolicy.form.beforeFreeCancel"></el-input>
                    点前可以免费取消
                    <br>
                    {{ updateRoomRatePlanPolicy.form.beforeFreeCancel }}点至
                    <el-input size="mini" style="width: 50px;"
                        v-model="updateRoomRatePlanPolicy.form.chargedChargeCancel"></el-input>
                    点取消，收取订单总额
                    <el-input size="mini" style="width: 50px;"
                        v-model="updateRoomRatePlanPolicy.form.contractProportion"></el-input>
                    %的违约金
                    <br>
                    {{ updateRoomRatePlanPolicy.form.chargedChargeCancel }}后不可取消
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="postUpdateRoomRatePlanPolicy">确 定</el-button>
                <el-button @click="closeUpdateRoomRatePlanPolicy">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="发单文字配置" :visible.sync="issueConfig.isShow" width="640px" append-to-body>
            <el-input type="textarea" v-model="issueConfig.value" :rows="15" />
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="postHotelIssueConfig">确 定</el-button>
                <el-button @click="closeHotelIssueConfig">取 消</el-button>
            </div>
        </el-dialog>

    </div>

</template>

<script>
import {
    getHotelList, getCity, getELongHotelList,
    postAddHotel, postIsFreeCancelable, postUpdateRoomRatePlanPolicy, getHotelInfo,
    getSysUserInfo, getHotelByHotelId, postEditHotel, postHotelIssueConfig, getHotelIssueConfig,
    postEditLocalByOnline
} from "@/api/hotel/hotel";
import { getPersonInfo } from "@/api/hotel/jurisdiction";
export default {
    name: 'Hotel',
    dicts: ['el_jsfs', 'el_jdjd', 'el_zffs'],
    data() {
        return {
            main: {
                loading: false,
                list: [],
                total: 0,
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    hotelName: undefined,
                    hotelId: undefined
                },
                showSearch: true
            },
            addHotel: {
                isShow: false,
                title: '',
                ssgsName: undefined,
                ssgsId: undefined,
                form: {

                },
                ywryList: [],
                yyryList: [],
                rules: {
                    eHotelName: [
                        { required: true, message: "酒店名称不能为空", trigger: "blur" },
                    ],
                    lxrName: [
                        { required: true, message: "酒店联系人不能为空", trigger: "blur" },
                    ],
                    googleLon: [
                        { required: true, message: "酒店经度不能为空", trigger: "blur" },
                    ],
                    googleLat: [
                        { required: true, message: "酒店纬度不能为空", trigger: "blur" },
                    ],
                    jsfs: [
                        { required: true, message: "结算方式不能为空", trigger: "blur" }
                    ],
                    ywry: [
                        { required: true, message: "业务人员不能为空", trigger: "blur" }
                    ],
                    kpzt: [
                        { required: true, message: "开票主题不能为空", trigger: "blur" }
                    ],
                    ssgsName: [
                        { required: true, message: "所属公司不能为空", trigger: "blur" }
                    ],
                    jdjd: [
                        { required: true, message: "结单节点不能为空", trigger: "blur" }
                    ],
                    zffs: [
                        { required: true, message: "支付方式不能为空", trigger: "blur" }
                    ]
                }
            },
            selectElongHotel: {
                loading: false,
                list: [],
                isShow: false,
                queryParams: {
                    hotelName: undefined,
                    cityId: []
                },
                showSearch: true,
                cityData: []
            },
            updateRoomRatePlanPolicy: {
                isShow: false,
                form: {

                }
            },
            issueConfig: {
                isShow: false,
                hotelId: undefined,
                value: []
            }
        }
    }, created() {
        this.getHotelList();
        this.getCity();
        this.getPersonInfo();
    }, methods: {
        getHotelList() {
            this.main.loading = true;
            getHotelList(this.main.queryParams).then(response => {
                this.main.list = response.rows;
                this.main.total = response.total;
                this.main.loading = false;
            }
            );
        },
        getSysUserInfo() {
            getSysUserInfo().then(res => {
                this.addHotel.userList = res.data;
            }
            );
        },
        getCity() {
            getCity().then(response => {
                this.selectElongHotel.cityData = response.data;
            }
            );
        },
        getELongHotelList() {
            this.selectElongHotel.loading = true;
            getELongHotelList(this.selectElongHotel.queryParams).then(response => {
                this.selectElongHotel.list = response.data;
                this.selectElongHotel.loading = false;
            }
            );
        },
        handleHotelQuery() {
            this.getHotelList();
        },
        openAddHotel() {
            this.addHotel.title = '新增酒店';
            this.addHotel.form = {};
            this.addHotel.form.ssgsName = this.addHotel.ssgsName;
            this.addHotel.form.ssgsId = this.addHotel.ssgsId;
            this.addHotel.isShow = true;
        },
        closeAddHotel() {
            this.addHotel.isShow = false;
        },
        postAddHotel() {
            this.$refs["addHotelForm"].validate(valid => {
                if (valid) {
                    if (this.addHotel.form.hotelId) {
                        postEditHotel(this.addHotel.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.addHotel.isShow = false;
                            this.getHotelList();
                        });
                    } else {
                        postAddHotel(this.addHotel.form).then(response => {
                            if (response.code === 200) {
                                this.$modal.msgSuccess("添加成功");
                                this.addHotel.isShow = false;
                                this.getHotelList();
                            } else {
                                this.$modal.msgError(response.msg);
                            }
                        });
                    }
                }
            })
        },
        openSelectElongHotel() {
            this.selectElongHotel.list = [];
            this.selectElongHotel.isShow = true;
        },
        getElongHotel() {

            if (this.selectElongHotel.queryParams.cityId.length === 0) {
                this.$message.error('请选择城市');
                return;
            }

            if (!this.selectElongHotel.queryParams.hotelName) {
                this.$message.error('请输入酒店名称');
                return;
            }

            this.selectElongHotel.queryParams.pageNum = 1;
            this.getELongHotelList();
        },
        choiceELongHotel(row) {
            let that = this;
            this.$modal.confirm('是否添加' + row.HotelName + '?').then(function () {

                // 这里要调用一下酒店详细信息
                getHotelInfo({ eHotelId: row.HotelId }).then(res => {
                    that.addHotel.form.eHotelName = res.data.HotelName;
                    that.addHotel.form.eHotelId = res.data.HotelId;
                    that.addHotel.form.hotelPhone = res.data.Phone;
                    that.addHotel.form.category = res.data.Category;
                    that.addHotel.form.hotelAddress = res.data.Address;
                    that.addHotel.form.hotelCityId = that.selectElongHotel.queryParams.cityId;
                    that.addHotel.form.googleLon = res.data.GoogleLon;
                    that.addHotel.form.googleLat = res.data.GoogleLat;
                    if (that.addHotel.form.googleLon) {
                        that.addHotel.form.googleLon = that.addHotel.form.googleLon.substring(0, 9)
                    }

                    if (that.addHotel.form.googleLat) {
                        that.addHotel.form.googleLat = that.addHotel.form.googleLat.substring(0, 9)
                    }
                    that.selectElongHotel.isShow = false;
                }
                );
            })
        },
        jumpToHouse(row) {
            this.$router.push({ path: '/hotel/house', query: { hotelId: row.hotelId } });
        },
        jumpOnline(row) {
            this.$router.push({ path: '/hotel/online', query: { hotelId: row.hotelId } });
        },
        jumpToRoomStatus(row) {
            this.$router.push({ path: '/hotel/RoomStatus', query: { hotelId: row.hotelId } });
        },
        postIsFreeCancelable(value, row) {
            postIsFreeCancelable({ statu: value, dataStr: row }).then((res) => {
                if (res.code === 200) {
                    this.$modal.msgSuccess("操作成功");
                    this.getHotelList();
                }
            });
        },
        openUpdateRoomRatePlanPolicy(row) {
            this.updateRoomRatePlanPolicy.form = row;
            this.updateRoomRatePlanPolicy.isShow = true;
        },
        cancelRuleSwitch(value) {
            if (value === true) {
                this.updateRoomRatePlanPolicy.form.isCancel = 1;
            } else {
                this.updateRoomRatePlanPolicy.form.isCancel = 0;
            }
        },
        postUpdateRoomRatePlanPolicy() {
            postUpdateRoomRatePlanPolicy(this.updateRoomRatePlanPolicy.form).then((res) => {
                if (res.code === 200) {
                    this.updateRoomRatePlanPolicy.isShow = false;
                    this.$modal.msgSuccess("操作成功");
                    this.getHotelList();
                }
            });
        },
        closeUpdateRoomRatePlanPolicy() {
            this.updateRoomRatePlanPolicy.isShow = false;
        },
        clearCityId() {
            this.selectElongHotel.queryParams.cityId = [];
            this.addHotel.form.hotelCityId = [];
        },
        openeditHotel(hotelId) {
            getHotelByHotelId({ hotelId }).then(res => {
                this.addHotel.title = '编辑酒店'
                this.addHotel.form = res.data;
                this.addHotel.form.hotelCityId = []
                this.addHotel.form.hotelCityId.push(res.data.sfid + "");
                this.addHotel.form.hotelCityId.push(res.data.sjid + "");
                this.addHotel.isShow = true;
            }
            );
        },
        getPersonInfo() {
            const that = this;
            getPersonInfo().then(res => {
                that.addHotel.ywryList = res.data.ywryUsers;
                that.addHotel.yyryList = res.data.yyryUsers;
                that.addHotel.ssgsName = res.data.ssgs.deptName;
                that.addHotel.ssgsId = res.data.ssgs.deptId;
            }
            );
        },
        openIssueConfig(hotelId) {
            this.issueConfig.hotelId = hotelId;
            getHotelIssueConfig({ hotelId }).then(res => {
                this.issueConfig.value = res.msg;
                this.issueConfig.isShow = true;
            }
            );
        },
        postHotelIssueConfig() {
            postHotelIssueConfig({ value: this.issueConfig.value, hotelId: this.issueConfig.hotelId }).then(response => {
                if (response.code === 200) {
                    this.addHotel.isShow = false;
                    this.$modal.msgSuccess("操作成功");
                    this.getHotelList();
                }
            });
        },
        closeHotelIssueConfig() {
            this.issueConfig.isShow = false;
        },
        postEditLocalByOnline() {
            const eHotelId = this.addHotel.form.eHotelId;
            const hotelId = this.addHotel.form.hotelId;
            postEditLocalByOnline({ eHotelId: eHotelId, hotelId: hotelId }).then(res => {
                if (res.code === 200) {
                    this.addHotel.isShow = false;
                    this.$modal.msgSuccess("同步成功");
                    this.getHotelList();
                }
            })

        }
    },
    computed: {
        dynamicELongStatus() {
            return function (status) {
                if (status === 0) {
                    return '有效';
                } else if (status === 1) {
                    return '无效';
                } else if (status === 2) {
                    return '删除';
                }
            };
        },
        dynamicIsFreeCancelable() {
            return function (status) {
                if (status === 1) {
                    return true;
                } else {
                    return false;
                }
            };
        },
        dynamicIsCancel() {
            return function (status) {
                if (status === 1) {
                    return true;
                } else {
                    return false;
                }
            };
        },
        dynamicStarRate() {
            return function () {
                if (this.addHotel.form.StarRate) {
                    return '{value}星';
                } else {
                    return '-星';
                }
            };
        },
        formattedDate() {
            return function (date) {
                return date.replace(/T/g, ' ').trim();
            };
        },
    }
}
</script>

<style scoped>
.el-form-item__content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rate-container {
    display: inline-block;
}
</style>